<template>
  <div class="dashboard-container">
    <!-- 模块标题 -->
    <h2 class="panel-title">设备控制面板</h2>

    <!-- 主体内容 -->
    <el-row>
      <!-- 左侧状态矩阵 -->
      <el-col>
        <div class="status-matrix">
          <div class="matrix-header grid-container">
            <div v-for="header in matrixHeaders" :key="header" class="header-item">{{
              header
            }}</div>
          </div>
          <div class="matrix-content">
            <div v-for="(row, index) in axisData" :key="index" class="grid-container">
              <div class="cell">{{ row.axis }}</div>
              <div class="cell">{{ row.speed }}</div>
              <div class="cell">{{ row.acceleration || '-' }}</div>
              <div class="cell">{{ row.position }}</div>
              <div class="cell">
                <el-tag :type="modeTagType[row.mode]">{{ row.mode }}</el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧指示灯 -->
      <el-col>
        <!-- 指示灯与标题同行容器 -->
        <div class="horizontal-indicator">
          <h3 class="inline-title">货叉模式指示灯：</h3>

          <div class="indicator-group">
            <!-- LED指示灯 -->
            <div class="led-container">
              <div
                v-for="n in 2"
                :key="n"
                class="led"
                :class="{
                  'active-blue': n === 1 && isSingleFork,
                  'active-orange': n === 2 && !isSingleFork,
                }"
              ></div>
            </div>

            <!-- 状态标签 -->
            <span class="status-label">
              {{ isSingleFork ? '单货叉模式' : '双货叉模式' }}
            </span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 速度曲线图 -->
    <div class="chart-container">
      <h3 class="sub-title">三轴速度协同曲线</h3>
      <div id="speed-chart" style="height: 30vh"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { ElRow, ElCol, ElTag } from 'element-plus';

  // 运动轴数据
  const matrixHeaders = ['运动轴', '实时速度', '加速度', '当前位置', '运行模式'];
  const axisData = ref([
    {
      axis: 'X轴水平',
      speed: '1.2m/s',
      acceleration: '0.5m/s²',
      position: '(X=1200,Y=300)',
      mode: '自动',
    },
    {
      axis: 'Y轴提升',
      speed: '0.8m/s',
      acceleration: null,
      position: 'Z=2层',
      mode: '维修模式',
    },
  ]);

  // 运行模式标签样式
  const modeTagType = {
    自动: 'success',
    维修模式: 'warning',
  };

  // 货叉指示灯
  const isSingleFork = ref(true);

  // 图表初始化
  let chartInstance = null;
  onMounted(() => {
    chartInstance = echarts.init(document.getElementById('speed-chart'));
    const option = {
      xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] },
      yAxis: { type: 'value', name: '速度 (m/s)' },
      series: [
        { name: 'X轴', type: 'line', smooth: true, data: [0, 1.2, 0.8, 1.5, 1.0, 0.5] },
        { name: 'Y轴', type: 'line', smooth: true, data: [0, 0.8, 1.0, 0.6, 1.2, 0.9] },
        { name: 'Z轴', type: 'line', smooth: true, data: [0, 0.5, 0.9, 1.2, 0.7, 1.0] },
      ],
      tooltip: { trigger: 'axis' },
      legend: { top: 'bottom', textStyle: { color: '#fff' } },
      grid: { containLabel: true, top: '10%', bottom: '20%' },
    };
    chartInstance.setOption(option);

    // 窗口 resize 事件
    window.addEventListener('resize', () => chartInstance.resize());
  });
</script>

<style scoped>
  .dashboard-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 1vw;
    color: white;
    height: 80vh;
    overflow-y: auto;
  }

  .panel-title {
    font-size: 1vw;
    text-align: left;
    color: white;
  }

  .sub-title {
    font-size: 1vw;
    margin: 1.5vh 0;
    color: white;
  }

  /* 状态矩阵样式 */
  .status-matrix {
    background: rgba(0, 46, 93, 0.6);
    border-radius: 1vw;
    padding: 0.6vw;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr 1.2fr;
    gap: 1vw;
    padding: 0.8vh 0;
    align-items: center;
  }

  .matrix-header {
    font-weight: bold;
    border-bottom: 0.2vh solid gray;
  }

  /* LED指示灯样式 */
  .horizontal-indicator {
    display: flex;
    align-items: center;
    gap: 1.2vw;
    padding: 1.2vh 0;
  }

  .inline-title {
    margin: 0;
    font-size: 1vw;
    color: #ffffff;
    white-space: nowrap;
  }

  .indicator-group {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5vw 1.5vw;
    border-radius: 2vw;
  }

  .led-container {
    display: flex;
    gap: 0.8vw;
  }

  .led {
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background: #606266;
    transition: all 0.3s;
  }

  .active-blue {
    background: #409eff;
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
  }

  .active-orange {
    background: #47bf26;
    box-shadow: 0 0 10px rgba(118, 175, 47, 0.6);
  }

  .status-label {
    color: #e6e6e6;
  }

  /* 图表容器 */
  .chart-container {
    background: rgba(138, 139, 142, 0.5);
    border-radius: 1vw;
    padding: 0.1vw 1vw;
  }
</style>
